// 检测设备管理
<template>
  <div class="equipment labBox">
    <laboratoryRightHeader
      :title="'检测设备列表'"
      :placeholder="'请输入设备名称'"
      @outlabValue="(event) => (formData.equipmentName = event)"
    ></laboratoryRightHeader>
    <div class="table">
      <div class="tableDetail flex-common">
        <div class="detailIntem mr-38 fs-14 cr-hui3">
          设备总数
          <span class="familyD fs-18 cr-main ml-12 mr-6">{{
            deviceStatus.equipmentSum
          }}</span>
          <span class="cr-hui4 fs-12">台</span>
        </div>
        <div class="detailIntem mr-38 cr-hui3">
          在线
          <span class="familyD fs-18 cr-main ml-12 mr-6">{{
            deviceStatus.onlineNum
          }}</span>
          <span class="cr-hui4 fs-12">台</span>
        </div>
        <div class="detailIntem mr-38">
          离线
          <span class="familyD fs-18 cr-red ml-12 mr-6">{{
            deviceStatus.outlineNum
          }}</span>
          <span class="cr-hui4 fs-12">台</span>
        </div>
        <div class="detailIntem mr-38">
          正在使用
          <span class="familyD fs-18 cr-huang ml-12 mr-6">{{
            deviceStatus.usingNum
          }}</span>
          <span class="cr-hui4 fs-12">台</span>
        </div>
      </div>
      <mergeTable :tableData="tableList" :tableConfig="config">
        <el-table-column
          slot="index"
          align="center"
          type="index"
          label="编号"
        ></el-table-column>
        <el-table-column align="center" label="设备状态" slot="equipmentType">
          <template slot-scope="{ row }">
            <span
              class="fs-12"
              :style="{
                color: tableCommonMethod.getOnlineColor(row.equipmentType),
              }"
              >{{ tableCommonMethod.getOnlineStatus(row.equipmentType) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="使用记录" slot="use">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="useDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="异常记录" slot="singular">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="singularDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="维护记录" slot="maintain">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="maintainDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
      </mergeTable>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </div>
    <!-- 使用记录弹窗 -->
    <tableDialog
      :dialogTableVisible="use.useTableDialog"
      :exportInterfaceName="'equipmentUsageexport'"
      :formData="'formData'"
      :eventName="'getlaboratoryEquipmentUse'"
      :total="use.total"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :title="'使用记录'"
      :type="'datetimerange'"
      :showInput="true"
      :placeholder="use.placeholder"
      :tableTimeValue="tableTimeValue"
      @outValue="(event) => (tableTimeValue = event)"
      @outInputValue="(event) => (formData.user = event)"
      @close="
        (event) => {
          use.useTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="use.table" :tableConfig="use.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 异常记录弹窗 -->
    <tableDialog
      :dialogTableVisible="singular.singularTableDialog"
      :title="'异常记录'"
      :keys="'id'"
      :valueKey="'id'"
      :label="'name'"
      :total="singular.total"
      :type="'datetimerange'"
      :options="singular.options"
      :optionsTitle="singular.optionsTitle"
      :uploadTrue="false"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :formData="'formData'"
      :eventName="'getequipmentEvent'"
      :tableTimeValue="tableTimeValue"
      @outValue="(event) => (tableTimeValue = event)"
      @outOptionValue="(event) => (formData.eventType = event)"
      @close="
        (event) => {
          singular.singularTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="singular.table" :tableConfig="singular.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="异常类型" slot="eventType">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getStatuseventType(row.eventType)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 维护记录弹窗 -->
    <tableDialog
      :dialogTableVisible="maintain.maintainTableDialog"
      :title="'维护记录'"
      :text="`累计维修次数：${formData.findCount}次`"
      :total="maintain.total"
      :type="'datetimerange'"
      :uploadTrue="false"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :formData="'formData'"
      :eventName="'getequipmentMaintain'"
      :tableTimeValue="tableTimeValue"
      @outValue="(event) => (tableTimeValue = event)"
      @outOptionValue="(event) => (formData.eventType = event)"
      @close="
        (event) => {
          maintain.maintainTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="maintain.table" :tableConfig="maintain.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
  </div>
</template>

<script>
import {
  laboratoryEquipmentConfig,
  laboratoryEquipmentUseConfig,
  laboratoryEquipmentSingularConfig,
  laboratoryEquipmentMaintainConfig,
} from "@/jsonData/table";
import {
  searchAll,
  selectList,
  laboratoryEquipmentUse,
  equipmentEvent,
  equipmentMaintainfindCount,
  equipmentMaintain,
} from "@/http/api";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      facultyNo: (state) => state.laboratory.facultyNo,
      laboratoryNo: (state) => state.laboratory.laboratoryNo,
      collegeNo: (state) => state.laboratory.collegeNo,
    }),
  },
  name: "equipment",
  data() {
    return {
      tableCommonMethod: tableCommonMethod,
      value: "",
      total: 0,
      tableList: [],
      config: laboratoryEquipmentConfig,
      singular: {
        singularTableDialog: false,
        optionsTitle: "异常类型",
        options: [
          {
            id: "",
            name: "全部",
          },
          {
            id: "1",
            name: "人工上报",
          },
          {
            id: "2",
            name: "自动检测",
          },
        ],
        table: [],
        config: laboratoryEquipmentSingularConfig,
        total: 0,
      },
      use: {
        useTableDialog: false,
        placeholder: "请输入使用人员名称",
        table: [],
        config: laboratoryEquipmentUseConfig,
        total: 0,
        out: true,
      },
      maintain: {
        maintainTableDialog: false,
        table: [],
        config: laboratoryEquipmentMaintainConfig,
        total: 0,
      },
      tabList: [
        {
          id: 0,
          name: "环境监测数据",
        },
        {
          id: 1,
          name: "异常记录",
        },
        {
          id: 2,
          name: "设备信息",
        },
      ],
      deviceStatus: {},
      formData: {
        equipmentType: 1,
        cabinetName: "",
        equipmentName: "",
        reagentName: "",
        collegeNo: "",
        facultyNo: "",
        laboratoryNo: "",
        pageNum: 1,
        diaPageNum: 1,
        diaPageSize: 10,
        pageSize: 10,
        starttime: "",
        lasttime: "",
        equipmentNo: "",
        user: "",
        eventType: "",
        type: "",
        findCount: "",
      },
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    this.initSearchAll();
    this.initSelectList();
  },
  methods: {
    /* 设备不同状态对应的数量 */
    async initSearchAll() {
      let res = await searchAll({
        equipmentType: this.formData.equipmentType,
        facultyNo: this.facultyNo,
        laboratoryNo: this.laboratoryNo,
      });
      if (res.code === 20000) {
        this.deviceStatus = res.data;
      }
    },

    // 公用一个接口，根据 equipmentType 设备类型来区分
    async initSelectList() {
      let params = {
        collegeNo: this.collegeNo,
        facultyNo: this.facultyNo,
        laboratoryNo: this.laboratoryNo,
        equipmentType: this.formData.equipmentType,
        equipmentName: this.formData.equipmentName,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
      };
      let res = await selectList(params);
      if (res.code === 20000) {
        this.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    onPage(val) {
      this.formData.pageSize = val;
      this.initSelectList();
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initSelectList();
    },

    // 使用记录
    useDialog(row) {
      this.reset();
      this.use.useTableDialog = true;
      this.formData.type = "use";
      this.formData.equipmentNo = row.equipmentNo;
      this.getlaboratoryEquipmentUse();
    },
    // 异常记录
    singularDialog(row) {
      this.reset();
      this.formData.type = "singular";
      this.singular.singularTableDialog = true;
      this.formData.equipmentNo = row.equipmentNo;
      this.getequipmentEvent();
    },
    // 维护记录
    maintainDialog(row) {
      this.reset();
      this.formData.type = "maintain";
      this.maintain.maintainTableDialog = true;
      this.formData.equipmentNo = row.equipmentNo;
      this.initfindCount();
      this.getequipmentMaintain();
    },
    /* 设备不同状态对应的数量 */
    async initfindCount() {
      let params = {
        user: this.formData.user,
        equipmentNo: this.formData.equipmentNo,
      };
      let res = await equipmentMaintainfindCount(params);
      if (res.code === 20000) {
        this.formData.findCount = res.data;
      }
    },
    // 使用记录弹窗列表
    async getlaboratoryEquipmentUse() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        user: this.formData.user,
      };
      let res = await laboratoryEquipmentUse(params);
      if (res.code === 20000) {
        this.use.table = res.data.rows;
        this.use.total = res.data.total;
      }
    },
    // 异常记录弹窗列表
    async getequipmentEvent() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        eventType: this.formData.eventType,
      };
      let res = await equipmentEvent(params);
      if (res.code === 20000) {
        this.singular.table = res.data.rows;
        this.singular.total = res.data.total;
      }
    },
    // 维护记录弹窗列表
    async getequipmentMaintain() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        user: this.formData.user,
      };
      let res = await equipmentMaintain(params);
      if (res.code === 20000) {
        this.maintain.table = res.data.rows;
        this.maintain.total = res.data.total;
      }
    },
    // 初始化时间和页码
    reset() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.diaPageNum = 1;
      this.formData.diaPageSize = 10;
      this.formData.starttime = this.$getTime(originTimeValue[0], true);
      this.formData.lasttime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = originTimeValue;
    },
  },
  watch: {
    // 表格弹窗时间返回
    tableTimeValue: {
      handler(val) {
        this.formData.starttime = val[0];
        this.formData.lasttime = val[1];
        switch (this.formData.type) {
          case "use":
            this.getlaboratoryEquipmentUse();
            break;
          case "singular":
            this.getequipmentEvent();
            break;
          case "maintain":
            this.getequipmentMaintain();
            break;
        }
      },
      deep: true,
    },
    "formData.user": {
      handler(val) {
        this.getlaboratoryEquipmentUse();
      },
      deep: true,
    },
    "formData.equipmentName": {
      handler(val) {
        this.initSelectList();
      },
      deep: true,
    },
    "formData.eventType": {
      handler(val) {
        this.getequipmentEvent();
      },
      deep: true,
    },
    laboratoryNo(val) {
      this.initSelectList();
    },
  },
};
</script>

<style lang="scss" scoped>
.equipment {
  .table {
    padding: 0px 24px;
    .tableDetail {
      height: 64px;
    }
    .bottom-wrap {
      left: 48px !important;
      right: 48px !important;
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>